<script setup>
import { reactive, watch, toRefs } from 'vue';
// toRefs : 让我们解构出来的数据具备响应式

const state = reactive({
  price: 100,
  name: '涛涛'
})

const { price, name } = toRefs(state)

// 侦听器监听一个属性的变化
// currentValue 当前最新值，当前数据
// prevValue 原来的值，当前数据
// watch(price, (currentValue, prevValue) => {
//   // 侦听器的业务逻辑代码
//   console.log('侦听器被执行了',currentValue, prevValue);
// })

// 侦听器监听多个属性的变化
// currentValue 当前最新值，是数组
// prevValue 原来的值，是数组
watch([price, name], (currentValue, prevValue) => {
  // 侦听器的业务逻辑代码
  console.log('侦听器被执行了', currentValue, prevValue);

  console.log(document.querySelector('h1').innerText);
}, {
  immediate: false, // 配置非惰性立即执行
  deep: true, // 配置深度监听
  flush: 'post', // 设置刷新机制，等到 DOM 更新结束后才会执行回调函数
})

</script>

<template>
  <div>
    <h1>
      {{ price }}
    </h1>
    <input type="text" v-model="price">

    <button @click="change">点击修改</button>
  </div>
</template>

